<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">银行活期存款系统</h3>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
          <!--           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>-->
          <svg
            slot="prefix"
            t="1681811077128"
            icon-class="user"
            class="el-input__icon icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8392"
            width="64"
            height="64"
          >
            <path
              d="M424.53 603.29c-98.16 0-178.02-79.85-178.02-177.99s79.85-178 178.02-178c98.14 0 177.99 79.85 177.99 177.99s-79.85 178-177.99 178z m0-310.14c-72.87 0-132.17 59.28-132.17 132.15s59.3 132.15 132.17 132.15 132.15-59.28 132.15-132.15-59.29-132.15-132.15-132.15z"
              p-id="8393"
              fill="#bfbfbf"
            />
            <path
              d="M641.61 820.39c-12.67 0-22.92-10.26-22.92-22.92 0-107.07-87.11-194.18-194.16-194.18-107.07 0-194.18 87.11-194.18 194.18 0 12.66-10.25 22.92-22.92 22.92-12.67 0-22.92-10.26-22.92-22.92 0-132.35 107.68-240.03 240.03-240.03s240 107.68 240 240.03c-0.01 12.66-10.26 22.92-22.93 22.92z m21.55-312.47c-10.52 0-19.99-7.28-22.36-17.97-2.73-12.36 5.06-24.6 17.42-27.33 59.93-13.29 103.4-67.54 103.4-129.02 0-72.87-59.28-132.15-132.15-132.15-32.75 0-64.16 12.07-88.47 33.99-9.42 8.45-23.91 7.72-32.37-1.67-8.48-9.4-7.75-23.9 1.66-32.38 32.75-29.53 75.08-45.79 119.18-45.79 98.14 0 177.99 79.85 177.99 177.99 0 82.81-58.59 155.89-139.31 173.77-1.67 0.4-3.35 0.56-4.99 0.56z"
              p-id="8394"
              fill="#bfbfbf"
            />
            <path
              d="M846.58 728.7c-12.67 0-22.92-10.26-22.92-22.92 0-107.07-87.11-194.18-194.18-194.18-12.67 0-22.92-10.26-22.92-22.92s10.25-22.92 22.92-22.92c132.35 0 240.03 107.68 240.03 240.03-0.01 12.64-10.26 22.91-22.93 22.91z"
              p-id="8395"
              fill="#bfbfbf"
            />
          </svg>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          show-password
          @keyup.enter.native="handleLogin"
        >
          <!--          <svg-icon slot="prefix" icon-class="password" class="el-input__icon icon"/>-->
          <svg
            slot="prefix"
            t="1681811132546"
            icon-class="password"
            class="el-input__icon icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9552"
            width="64"
            height="64"
          >
            <path
              d="M869.012601 642.85835c12.107759 0 21.912056-10.031471 21.912056-22.38687l0-196.638519c0-46.985104-37.273928-85.09405-83.262332-85.09405l-75.425853 0c-0.022513-0.021489-0.022513-0.067538-0.047072-0.089028l-7.858992 0 0-62.188364c0-103.028515-81.636299-186.584536-182.363398-186.584536l-36.479843 0c-100.045577 0-181.165106 82.449827-182.2713 184.529737 0 0.181125-0.11154 0.316202-0.11154 0.497327 0 0.113587 0.065492 0.203638 0.065492 0.315178 0 0.407276-0.065492 0.814552-0.065492 1.242294l0.316202 0c0.858554 12.132318 10.704806 21.799492 23.040762 21.799492 12.377912 0 22.204721-9.667174 23.037692-21.799492l0.227174 0c3.479241-77.863369 63.339584-139.938146 136.844691-139.938146l34.290991 0c75.765591 0 137.184429 65.825195 137.184429 147.031705l0 55.095829 34.108842 0c0 0.021489 0 0.067538 0.023536 0.089028L355.676164 338.739934c0-0.021489 0.021489-0.067538 0.045025-0.089028l-49.334615 0c-0.022513 0.021489-0.045025 0.067538-0.045025 0.089028l-95.483678 0c-45.99045 0-83.263355 38.108946-83.263355 85.09405l0 422.777933c0 46.984081 37.272905 85.070514 83.263355 85.070514l596.804455 0c45.988404 0 83.262332-38.086433 83.262332-85.070514l0-24.599258c-0.047072-12.311397-9.850345-22.295795-21.912056-22.295795s-21.842471 9.984399-21.913079 22.295795l0 0.066515c0 0.021489 0 0.021489 0 0.046049 0 0 0 0.046049 0 0.066515l0 19.946284c0 24.733311-19.6045 44.771693-43.820018 44.771693L215.238644 886.909715c-24.216541 0-43.821041-20.038382-43.821041-44.771693L171.417603 428.306856c0-24.736381 19.6045-44.771693 43.821041-44.771693L803.278481 383.535163c24.215518 0 43.820018 20.036335 43.820018 44.771693l0 192.164624C847.099523 632.826879 856.904843 642.85835 869.012601 642.85835zM517.142625 647.328152l-31.601742 0c-4.38282 0-7.885598 3.569292-7.885598 7.972579l0 95.510284c0 4.40431 3.524267 7.951089 7.885598 7.951089l31.601742 0c0.947582 0 1.807159-0.227174 2.620687-0.541329 64.87659-5.399987 115.860774-60.043514 115.880217-126.791731 0-70.344115-56.607252-127.35762-126.404921-127.35762-66.234517 0-120.491235 51.365878-125.866662 116.736725-0.273223 0.837064-0.497327 1.699712-0.497327 2.64627l0 31.847336c0 4.406356 3.523243 7.954159 7.882528 7.954159l31.602765 0c4.359284 0 7.904017-3.548826 7.904017-7.954159l0-7.972579c-1.036609-5.149277 0-10.434653 0-15.900132 0-43.9817 35.353183-79.606059 78.974679-79.606059 43.640939 0 78.992075 35.623335 78.992075 79.606059 0 38.489616-27.130917 70.612221-63.204507 77.998445l0-54.125735C525.026176 650.897444 521.502933 647.328152 517.142625 647.328152z"
              fill="#bfbfbf"
              p-id="9553"
            />
          </svg>
        </el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <!-- <div style="float: right;" v-if="operation">
          <router-link class="link-type" :to="'/operation'">银行柜员登录</router-link>
        </div> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { loginOperation } from '@/api/api'

export default {
  data() {
    return {
      codeUrl: '',
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入您的账号'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入您的密码'
          }
        ]
      },
      loading: false,
      // 注册开关
      operation: true,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          loginOperation({ 'accountName': this.loginForm.username, 'password': this.loginForm.password }).then(res => {
            console.log(res, 'res')
            if (res.data.responseStatusCode == 200) {
              console.log('res.data.token', res.data.data)
              localStorage.setItem('token', res.data.data)
              localStorage.setItem('role', 2)
              localStorage.setItem('username', this.loginForm.username)
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'success'
              })
              console.log(this.redirect)
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            } else {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
              this.loading = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  //background-image: url("../assets/images/login-background.jpg");
  background-image: url("https://img-qn-3.51miz.com/preview/photo/00/01/49/49/110f9080_P1494974_bbe3a6aeO.jpg");
  //background-image: url("https://img-qn-0.51miz.com/preview/photo/00/01/49/49/31ef1eb3_P1494959_3378ef5dO.jpg");
  //background-image: url("https://img-qn-4.51miz.com/preview/photo/00/01/49/49/85915e20_P1494976_89287e16O.jpg");
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  height: 38px;
}

.login-form .el-input input {
  text-indent: 10px !important;
}
</style>
